<template>
    <div class="page">
        <div class="special">
            <h2>精选专题</h2>
            <div class="specialItem" v-for="(item,index) in special" :key=index>
                <img :src=item.poster>
                <div class="name">{{item.title}}</div>
                <div class="subTitle">{{item.subTitle}}</div>
            </div>
        </div>
        <div class="hotShop">
            <h2>热门周边</h2>
            <div class="hotItem" v-for="(item,index) in hotShop" :key=index>
                <img :src=item.goodsPoster>
                <div class="goodsname">{{item.goodsName}}</div>
                <div class="price">￥{{item.price}}</div>
            </div>

        </div>
    </div>
</template>
<script>
import {shopApi} from "@api/request.js"
export default {
    name:"Shop",
    data(){
        return{
            special:[],
            hotShop:[]
        }
    },
    created(){
        this.getShopList();
    },
    methods:{
        async getShopList(){
            let data=await shopApi();
           
            this.special=data.result.themes
            this.hotShop=data.result.hotGoods
             console.log(this.special)
              console.log(this.hotShop)

        }
    }
}
</script>
<style lang="scss">
.page{
    background-color: white;

}
.special{
    margin-top:.4rem;
    margin-left: .4rem;
    margin-bottom: .4rem;
    border: 1px solid #f9f9f9;
    h2{
      
        margin-bottom: .4rem
    }
    .specialItem{
        width: 6.7rem;
        height: 5.7rem;

        img{
            width: 6.7rem;
            height: 4.48rem;
            border-radius:20px;
        }
        .name{
            font-size: 16px;
            margin-bottom: .1rem;
            line-height: .4rem;
            font-weight: 700
        }
        .subTitle{
            font-size: 12px;
            color: #000;
            opacity: .56;
        }

    }

}
.hotShop{
    background-color: white;
  h2{
            margin-bottom: .4rem;
            margin-left: .4rem;
        }
    .hotItem{ background-color: white;
        width: 3.2rem;
        height: 4.32rem;
            margin-bottom: 25px;
            margin-left: .4rem;
        float: left;
      
        img{
            width: 3.2rem;
            height: 3.14rem;
        }
        .goodsname{
            font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 10px 0 5px 
        }
        .price{
            font-size: 14px;
            color: #eb484a;
        }
    }

}

</style>